import React, { useRef } from 'react'
import { Button, Input, Image } from 'antd'
import { connect } from 'umi'
import styles from './index.less'

const Login = ({ dispatch, loginModel }) => {
  const username = useRef()
  const password = useRef()
  const captcha = useRef()
  const { captchaData } = loginModel

  const submit = () => {
    dispatch({
      type: 'loginModel/login',
      payload: {
        username: username.current.state.value,
        password: password.current.state.value,
        captcha: captcha.current.state.value
      }
    })
  }

  return (
    <div className={styles.wrapper}>
      <Input ref={username} placeholder="用户名" defaultValue={'15990149070'} />
      <Input ref={password} placeholder="密码" type="password" defaultValue={'666666'} />
      <Input ref={captcha} placeholder="验证码" />
      <Image width={200} height={100} src={captchaData.captcha_image_content} />
      <Button onClick={submit}>登录</Button>
    </div>
  )
}

const mapStateToProps = ({ loginModel }) => ({
  loginModel
})

export default connect(mapStateToProps)(Login)
